<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<!DOCTYPE html>
<head>
<meta name="users" content="active" />
</head>
<body>

	<!-- <ol class="breadcrumb">
		<li><a href="index.jsp">Admin Panel</a></li>
		<li><a href="#">Manage Users</a></li>
		<li class="active">Tables</li>
	</ol> -->


	<div class="row">
		<div class="col-md-12">

			<div class="table-responsive" style="height:480px">
				<h1 class="margin-bottom-15 col-sm-6" style="padding:0;">用户管理</h1>
				<div class="col-sm-6" style="text-align:right;padding:0;margin:14px 0 13px 0;">
					<button  id="btn_create"
						class="btn btn-small btn-default" onclick="createUser()"><i class="fa fa-plus"></i> 创建用户</button>
					<button id="btn_delete"
						class="btn btn-small btn-danger" onclick="deleteUser()"><i class="fa fa-trash-o"></i> 删除用户</button>
				</div>
				<table id="grid-user"
					class="table table-striped table-hover table-bordered grid-data"
					style="display: none;">
					<thead>
						<tr>
							<th data-column-id="id" data-identifier="true" data-type="numeric"
								data-visible="false">ID</th>
							<th data-column-id="username" data-header-css-class="col-sm-2">名称</th>
							<th data-column-id="role" data-formatter="role"
								data-header-css-class="col-sm-2">角色</th>
							<th data-column-id="description" data-sortable="false"
								data-header-css-class="col-sm-7">描述</th>
							<th data-column-id="commands" data-formatter="commands"
								data-sortable="false" data-header-css-class="col-sm-1">操作</th>
						</tr>
					</thead>

				</table>
			</div>
		</div>
	</div>


	<script type="text/javascript">

		function validateData(dialog,rowData){
			
            dialog.getModalBody().find("form").validate({
            	rules : {
            		username : {
            			required:true,
            	        remote:{//验证用户名是否已经存在
            	               type:"POST",
            	               url:"rest/user/exist",
            	               data:{
            	               		username:function(){return dialog.getModalBody().find('#username.data-field').val();},
            	               		startValue:rowData==null?"":rowData['username']
            	               } 
            	        }
            	    },        		
            		password : {
            			required:(dialog.getData("optionType") == "new" ? true:false)
            		},
            		confirm_password : {
            			required : (dialog.getData("optionType") == "new" ? true:false),
            			equalTo : "#password"
            		}
            	},
            	messages : {
            		username : {
            			required : "用户名不能为空",
            			remote : "用户名已经存在"
            		},
            		password : "密码不能为空",
            		confirm_password : {
            			required : "确认密码不能为空",
            			equalTo : "两次输入密码不一致"
            		}
            	},
            	errorElement: 'span',
                errorClass: 'help-block',
                errorPlacement: function(error, element) {  
                	element.parent().before(error);  
                },
            	submitHandler: function (form) {
            		$(form).ajaxSubmit({
            		    success: function(res) {
            		    	dialog.close();
            		    	messagebox.alert('success', res.msg);
            		    	$("#grid-user").bootgrid("reload");
            		    },
            		    error:function(res) {
            		    	dialog.close();
            		    	messagebox.alert('fails', res.msg);
        				    $("#grid-user").bootgrid("reload");
            		    }
            		});
            	}
            });
            
		};
				
		function createUser(){
			var dialogParams = {
            		title:"新建用户",
            		optionType:"new",
            		width:"400px",
            		url:"views/editUser.jsp"
            };
			createEditDialog(dialogParams);
		}
		
		function deleteUser(){
			var dialogParams = {
            		title:"确定删除所选用户 ?",
            		width:"400px"
            };
			var rowIds = grid.bootgrid("getSelectedRows").join(",");
            createDelDialog(dialogParams,rowIds);
		}
		
		function deleteData(rowIds){
			$.post('rest/user/delete', {rowIds:rowIds})
			.success(function(res){
				if (res.success){
				    messagebox.alert('success', res.msg);
				    $("#grid-user").bootgrid("reload");//todo
			    }else{
			    	messagebox.alert('fails', res.msg);
			    }
			})
			.error(function(res){
			    messagebox.alert('fails', '服务器返回错误，请重试');
			});
		}
		
		var grid = $("#grid-user").bootgrid({
			selection : true,
			multiSelect : true,
			navigation : 2,
			ajax: true,
			url: "rest/user/list",
			formatters: {
				"role": function(column, row){
		            return row.role=="ROLE_ADMIN"?"管理员":"普通用户";
		        },
		        "commands": function(column, row){
		            return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-name=\"" + row.username + "\" data-row-id=\"" + row.id + "\"><span class=\"fa fa-pencil\"></span></button> " + 
		                "<button type=\"button\" class=\"btn btn-xs btn-default command-delete\" data-name=\"" + row.username + "\" data-row-id=\"" + row.id + "\"><span class=\"fa fa-trash-o\"></span></button>";
		        }
		    }
		}).on("loaded.rs.jquery.bootgrid", function(){
		    /* Executes after data is loaded and rendered */
		    grid.find(".command-edit").on("click", function(e){
		        var rowData = grid.bootgrid("getRowsByRowIds",[$(this).data("row-id")])[0];
		        
		        var dialogParams = {
                		title:"编辑用户",
                		optionType:"edit",
                		width:"400px",
                		url:"views/editUser.jsp"
                };
		        createEditDialog(dialogParams,rowData);
		    }).end().find(".command-delete").on("click", function(e){
		    	var rowIds =$(this).data("row-id");
		    	var dialogParams = {
	                		title:"确定删除用户 " + $(this).data("name") +" ?",
	                		width:"400px"
	            };
		    	createDelDialog(dialogParams,rowIds);		        	
		    });
		});
		$("#grid-user").show();
	</script>
</body>
</html>